<template>
	<div class="doll-list" id="getMachinelist">
		<app-loading v-if="Machinelist.length < 1"></app-loading>
		<div class="doll-item indexnurl" v-for="item in Machinelist" :data-roomid="item.machine_id" >
			<router-link :to="{path:'/Show',query:{roomid:item.machine_id}}">
				<div class="doll_img">
					<img :src="item.cover">
				</div>
				<div class="name_box">
					<img class="state" src="../assets/images/playy.png">
					<span class="name elip">{{item.title}}</span>
				</div>
				<div class="doll_money">
					<img src="../assets/images/shouyejinbi.png">
					<span>{{item.price}}/次</span>
				</div>
			</router-link>
		</div>
	</div>
</template>
<script type="text/javascript">
	import appLoading from './loading'
	export default{
		name:"appMachinelist",
		components:{appLoading},
		data () {
			return {
				Machinelist:[]
			}
		},
		created () {
		    this.getMachinelist();
		},
		methods:{
			getMachinelist:function(){
		        this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/ToyMachine/getMachineList`,{page:1}).then((response) => {
		              console.log(response)
		              this.Machinelist = response.data.list;
		              this.$emit("listenmachineList",response.data.list)
		  		 })
		    },
		    
		}
	}
</script>


<style lang="less" scoped>
	@import '../assets/css/variables.less';
	.doll-list {
	    width: 96%;
	    margin: 0 auto;
	    justify-content: space-between;
	    align-items: baseline;
	    flex-wrap: wrap;
	    padding: 10px 0;
	    display: flex;
	}
	.doll-list .doll-item {
	    width: 49%;
	    background: #fff;
	    border-radius: 5px;
	    position: relative;
	    margin-bottom: 10px;
	    .doll_img{
		    width: 100%;
		    border-radius: 8px;
		    overflow: hidden;
		    box-shadow: 0 0 15px #dadada;
		    img{
			    width: 100%;
			    height: 190px;
			    display: block;
			    border-radius: 8px;
			}
		}
		.name_box {
		    padding: 10px 5px 0;
		    .state{
		    	width:15px;
		    	margin-right:5px;
		    	vertical-align: middle;
		    }
		    .name{
		    	width: calc(100% - 20px);
			    width: -webkit-calc(100% - 20px);
			    display: inline-block;
			    vertical-align: middle;
			    font-size:14px;
		    }
		}
		.doll_money {
			padding: 0 5px;
			img{
				width:20px;
				margin-right:5px;
				vertical-align: middle;
			}
			span{
				vertical-align: middle;
				color:#666;
				font-size:14px;
			}
		}
	}
    


</style>